import React, { Component } from 'react';
import {
	StyleSheet, Text, Animated, View, TouchableOpacity
} from "react-native";
import moment from 'moment';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import MethodUtil from '../../../utils/MethodUtil';
import Utils from '../../../utils/utils';
import { title } from '../create/_components/form/offerMap';
import { showMap } from '../create/_components/form/offerMap.js';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
const scale = GLOBAL.SCALE;
const arrowIcon = require('../../../imgs/order/down.png')
export class ResourceOfferCard extends Component {
	constructor(props) {
		super(props);
		this.state = {
			allData: {},
			itemData: {},
			listData: [],
			imgObj: new Animated.Value(0)
		}
	}

	componentWillReceiveProps(props) {
		const { listData, itemData, allData } = props;
		this.setState({
			listData,
			itemData,
			allData
		})
	}

	componentWillMount() {
		const { listData, itemData, allData } = this.props;
		this.setState({
			listData,
			itemData,
			allData
		})
	}

	dateFormat(date) {
		return date ? `${moment(date).format('YYYY/MM/DD')} ${date.substring(11, 16)}` : '-'
	}

	// 商品展开和隐藏
	toggleProduct = (index, currentHeight, openHeight) => {
		let { listData, imgObj } = this.state;
		listData[index].showItem = !listData[index].showItem;
		Animated.spring(currentHeight, {
			duration: 300,
			toValue: listData[index].showItem ? openHeight * scale : 224 * scale,
		}).start();
		Animated.timing(imgObj, { toValue: listData[index].showItem ? 1 : 0, duration: 300 }).start()
		this.props.resetListData(listData)
	}

	_showUdprice = (udPrice, uomName, bizModel) => {
		let isS = (udPrice >= 0) || false;
		return `${isS ? '升水' : '贴水'}${showMap.isShowTip(bizModel) ? '(*底价)' : ''}${isS ? '+' : ''}${udPrice}元/${uomName || '吨'} | `
	}

	_formatPrice = (data) => {
		let { priceType, price, modelPrice, priceTypeLabel } = data;
		if (priceType == 2) {
			if (!Utils.isEmpty(price)) {
				return `¥${MethodUtil.toThousands(price || 0, 2)}`;
			} else {
				return '-';
			}
		} else {
			return `${priceTypeLabel} ¥${MethodUtil.toThousands(modelPrice || 0, 2)}`;
		}
	}

	render() {
		let { renderBottomComponent, showStatus, itemForDetail, checkApproveList, salesType, getImgView } = this.props;
		let { imgObj, itemData } = this.state;
		let item = itemData.item;
		let { bidPackageApplyId, bidPackageName, statusName, createTime, bizModel, bizModelName, upTime, removeTime, resourceApplyList, priceType, fileIdArry, queryResourceBidPackageApplyExtTO } = item;
		let { channel, companyType, resourceGroupIds, salePurchaseAreaId, resCateIds, areaId } = queryResourceBidPackageApplyExtTO || {}
		let goodsCateIds = resCateIds ? resCateIds.split(',') : ''
		resourceGroupIds = resourceGroupIds ? resourceGroupIds.split(',') : ''
		areaIds = areaId ? areaId.split(',') : ''
		companyTypeIds = companyType ? companyType.split(',') : ''
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '180deg'] //输出值
		})
		return (
			<View style={{ paddingLeft: 12 * scale, paddingRight: 12 * scale, marginTop: 12 * scale, marginBottom: 12 * scale }}>
				<View style={styles.itemTimeData}>
					<Text style={styles.itemLightText}>{bidPackageApplyId || '-'}</Text>
					<Text style={styles.itemLightText}>{this.dateFormat(createTime)}</Text>
				</View>
				<TouchableOpacity style={styles.itemWrap} onPress={() => { this.props.itemPress && this.props.itemPress() }}>
					<View style={styles.itemName}>
						<Text style={styles.itemBoldTitle}>{bidPackageName || '-'}</Text>
						{showStatus ? <Text style={styles.itemTitleStatus} onPress={() => { checkApproveList && checkApproveList() }}>{statusName || '-'}</Text> : null}
					</View>
					<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingLeft: 12 * scale }}>
						{itemForDetail ? null : <Text style={{ fontSize: 10 * scale, paddingBottom: 12 * scale }}>{bizModelName || '-'} | </Text>}
						<Text style={{ fontSize: 10 * scale, paddingBottom: 12 * scale }}>上架：{this.dateFormat(upTime) || '-'} 有效期：{this.dateFormat(removeTime) || '-'} </Text>
					</View>
					<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingLeft: 12 * scale }}>
						{channel ?
							<Text style={styles.applyRemarkStyle} onPress={() => {
								navigationSeevice.navigate('TargetCustomers', {
									salePurchaseAreaId,
									salesType,
									readOnly: true,
									goodsCateIds,
									bidPackageApplyId,
									targetData: {
										channel,
										resourceGroupIds,
										companyTypeIds,
										areaIds
									}
								})
							}}>【查看定向客户】</Text> : null
						}
						{fileIdArry && fileIdArry.length > 0 ? <Text style={styles.applyRemarkStyle} onPress={() => { getImgView && getImgView() }}>【查看附件】</Text> : null}
					</View>
					<View style={styles.itemBorder}></View>
					<Animated.View style={[styles.itemBody, resourceApplyList && resourceApplyList.length > 2 ? { height: item.boxHeight, overflow: 'hidden' } : '']}>
						{
							resourceApplyList && resourceApplyList.length && resourceApplyList.map((good, index) => {
								let { goodsName, udPrice, price, offerBottomPrice, currencyTypeName, uomName, minOfferQuantity,
									offerMultiple, custPurNum, priceFormlaName, minBaseValue, maxBaseValue, maxCanSellNum, stepPrice } = good;
								let priceTypeName = priceType == 2 ? '暂定价' : '一口价';
								let priceFormlaN = priceType == 2 ? `| ${priceFormlaName}` : '';
								let priceTypeStyle = priceType == 2 ? { color: '#FA6400', backgroundColor: '#FBEFE8' } : { color: '#85C0EC', backgroundColor: '#ECF7FF' };
								let priceTypeLabel = bizModel == 'MZ' || bizModel == 'M' ? '含税单价' : '报盘底价';
								let modelPrice = bizModel == 'MZ' || bizModel == 'M' ? price : offerBottomPrice;
								//let finalUdPrice = bizModel == 'Z' || bizModel == 'DD' ? offerBottomPrice : udPrice;
								let custPurN = custPurNum ? ` | ${title.number[salesType]} ${custPurNum || '-'}${uomName || '吨'}` : '';
								let stepPr = stepPrice && bizModel == 'P' ? `| 客户含税单价加价梯度 ${stepPrice}${currencyTypeName + '/' + uomName || '元/吨'}` : '';

								let formatPrice = this._formatPrice({ priceType, price, modelPrice, priceTypeLabel });
								return (
									<View key={index} style={styles.productItem}>
										<Text style={styles.productItemName}>{goodsName || '-'}</Text>
										<View style={styles.productItemInfo}>
											<Text style={[styles.productItemInfoText, { width: '35%' }]}>{maxCanSellNum || '-'}吨</Text>
											<Text style={styles.productItemInfoText}>{formatPrice}{currencyTypeName || '元'}/{uomName || '吨'}</Text>
											{priceTypeName ? <Text style={[styles.productItemInfoTip, priceTypeStyle]}>{priceTypeName || ''}</Text> : null}
										</View>
										<Text style={styles.productItemTips}>成交范围({Utils.isEmpty(minBaseValue) ? '-' : minBaseValue}{uomName || '吨'}-{Utils.isEmpty(minBaseValue) ? '-' : maxBaseValue}{uomName || '吨'}){priceFormlaN} |{priceType == 2 ? this._showUdprice(udPrice, uomName, bizModel) : null} 最小报盘{minOfferQuantity || '-'}{uomName || '吨'} | 报盘倍量 {offerMultiple || '-'}{uomName || '吨'}{custPurN}{stepPr}</Text>
									</View>
								)
							})
						}
					</Animated.View>
					{
						resourceApplyList && resourceApplyList.length > 2 ? (
							<TouchableOpacity activeOpacity={1} style={styles.toggleImg} onPress={() => this.toggleProduct(itemData.index, item.boxHeight, item.openHeight)}>
								<Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={arrowIcon} ></Animated.Image>
							</TouchableOpacity>
						) : null
					}
					<View style={{ marginBottom: 3 * scale, marginTop: 10 * scale }}>
						{renderBottomComponent ? <View style={styles.itemBorder}></View> : null}
						{renderBottomComponent ? renderBottomComponent : null}
					</View>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	itemLightText: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '500',
	},
	itemTimeData: {
		marginBottom: 7 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	itemWrap: {
		backgroundColor: '#fff',
		width: '100%',
		borderRadius: 8 * scale,
		marginTop: 6 * scale,
		paddingTop: 14 * scale,
	},
	itemName: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		marginBottom: 15 * scale,
		marginTop: 5 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
	},
	itemBoldTitle: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '900',
		width: 250 * scale
	},
	itemTitleStatus: {
		fontSize: 10 * scale,
		color: style.color.themeColor,
		paddingRight: 7 * scale,
		paddingLeft: 7 * scale,
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 11 * scale
	},
	itemBorder: {
		height: 1 * scale,
		backgroundColor: '#E3E7F0',
		marginBottom: 15 * scale,
	},
	productItem: {
		flexDirection: 'column',
		justifyContent: 'center',
		paddingTop: 10 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	productItemName: {
		fontSize: 13 * scale,
		fontWeight: 'bold',
		marginBottom: 12 * scale
	},
	productItemInfoText: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
	},
	productItemInfoTip: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
		color: style.color.orange,
		backgroundColor: '#fbefe8',
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		paddingLeft: 6 * scale,
		paddingRight: 6 * scale,
		marginLeft: 8 * scale,
		borderRadius: 6 * scale
	},
	productItemInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 12 * scale
	},
	productItemTips: {
		fontSize: 11 * scale,
		lineHeight: 16 * scale,
		opacity: .8,
		marginBottom: 12 * scale
	},
	toggleImg: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center'
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale
	},
	consent: {
		paddingRight: 20 * scale,
		paddingLeft: 20 * scale,
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		fontSize: 12 * scale,
		opacity: 1,
		color: '#ffffff',
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 15 * scale,
		backgroundColor: style.color.themeColor,
		overflow: 'hidden'
	},
	itemdown: {
		fontSize: 12 * scale,
		color: style.color.themeColor,
		paddingRight: 20 * scale,
		paddingLeft: 20 * scale,
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 15 * scale,
		marginRight: 20 * scale,
		marginLeft: 10 * scale,
	},
	itemBody: {
		position: 'relative',
		overflow: 'hidden',
		backgroundColor: '#fff'
	},
	applyRemarkStyle: {
		fontSize: 13 * scale,
		color: style.color.themeColor,
		marginLeft: -5 * scale,
		// paddingTop: 8 * scale,
		paddingBottom: 8 * scale
	},
})